<template>
<!--  组件的结构-->
  <div class="student">
    <h1>{{msg}}</h1>
    <h2>  学生姓名：{{name}}</h2>
    <h2>  学生性别：{{sex}}</h2>
    <h2>当前的数是：{{number}}</h2>
    <button @click="sendStudentName">把学生名给app</button>
    <button @click="unbind">解绑atguigu</button>
    <button @click="add">点我加一</button>
    <button @click="death">销毁student组件的实例对象</button>
  </div>
</template>
<!-- 组件交互的代码-->
<script>
//默认暴露
 export default{
   name:'Student',
   data(){
     return{
       name:'小王帅帅帅帅啊',
       sex:'男',
       msg:'欢迎学习Vue',
       number:0
     }
   },
   methods:{
     sendStudentName(){
       //触发Student组件实例对象身上的atguigu事件
       this.$emit('atguigu',this.name)
       // this.$emit('demo')
     },
     unbind(){
       this.$off('atguigu')//解绑一个自定义事件
       // this.$off(['atguigu','demo'])//解绑多个自定义事件
       // this.$off()//解绑所有自定义事件
     },
     add(){
       this.number++
       console.log('add被调用了')
     },
     death(){
       this.$destroy()//student组件被销毁了，包括自定义组件的实例对象
     }

   }
 }
</script>
<!--组件的样式-->
<style scoped>
.student{
  background-color: orange;
  padding: 5px;
  margin-top: 30px;
}
</style>